<template>
  <div>
    <a-card hoverable style="width: 98%">
      <template #cover>
        <v-chart autoresize :option="options" style="height: 300px"></v-chart>
      </template>
      <a-card-meta :title="options.content" :description="options.description">
        <template #avatar v-if="showButton">
          <a-button type="primary" shape="circle" size="large" @click="chartSetting">
            <template #icon>
              <iconpark-icon name="chartSettin"></iconpark-icon>
            </template>
          </a-button>
        </template>
      </a-card-meta>
    </a-card>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    options: Object,
    showButton: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    function chartSetting() {
      alert("图表设置");
    }
    return { chartSetting };
  },
});
</script>

<style lang="scss" scoped></style>
